<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta  name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Highlight SceneLayer | Sample | ArcGIS API for JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .panel-side h2 {
            padding: 0 20px;
            margin: 20px 0;
            font-size: 14px;
            font-weight: 600;
        }

        .panel-side ul {
            list-style: none;
            margin: 0;
            padding: 0;
            font-weight: 100;
        }

        .panel-side li {
            list-style: none;
            padding: 3px 10px;
        }
    </style>
    <link rel="stylesheet"
            href="https://js.arcgis.com/4.18/esri/themes/light/main.css"  />
    <script src="https://js.arcgis.com/4.18/"></script>
    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/tasks/support/Query",
            "esri/widgets/Legend"
        ], function (WebScene, SceneView, Query, Legend) {
            var webscene = new WebScene({
                portalItem: {
                    id: "fbbc829fa7d342e7ae8d18c54a5eab37"
                }
            });

            var view = new SceneView({
                container: "viewDiv",
                map: webscene,
                //SceneView 可以以三种不同的质量模式绘制场景：高、中、低
                qualityProfile: "high",
                environment: {
                    lighting: {
                        directShadowsEnabled: false,//启用直接阴影
                        ambientOcclusionEnabled: true//启用环境遮挡
                    }
                },
                //用于配置突出显示的选项。在适当的LayerView上使用 highlight 方法来突出显示一个功能。
                highlightOptions:{
                    color:[0, 255, 255],
                    //填充的不透明度（光晕内的区域）。这将乘以颜色中指定的不透明度
                    fillOpacity:0.6
                }
            });



            webscene.when(()=>{
                //获取sceneLayer
                let sceneLayer = webscene.layers.getItemAt(0);

                var highlight;

                view.on("click", (event) => {
                    //每次点击的时候应当把之前的高亮去除
                    if(highlight){
                        highlight.remove();
                    }

                    //根据传入的屏幕坐标或者鼠标事件，获取地图图层在该点位下所有的展示的要素，
                    view.hitTest(event).then((response) => {
                        console.log(response.results[0].graphic.attributes.OBJECTID);
                        //获取建筑物的唯一编码
                        let objectid = response.results[0].graphic.attributes.OBJECTID;

                        //根据楼的唯一编码查询
                        var queryExtent = new Query({
                            objectIds: [objectid],
                        });

                        //获取在给定图层的视图上创建的 LayerView
                        view.whenLayerView(sceneLayer).then((sceneLayerView)=>{
                            //查询出建筑物的详情信息,方便转场
                            sceneLayerView.queryExtent(queryExtent).then((result)=>{
                                //result就是建筑的详情信息
                                console.log(result);
                                view.goTo(result.extent.center, { speedFactor: 0.5 });
                            });

                            //高亮 突出显示,返回一个高亮处理程序，其中包含一个remove()
                            highlight = sceneLayerView.highlight(response.results[0].graphic);
                        });

                    });
                });
            });


        });
    </script>

</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
